<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./yy.css" /> -->
    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        h2 {
            margin: 0;
        }

        #wrap {
            margin: 30px auto;
            width: 482px;
            padding: 5px;
            position: relative;
            border: 1px solid #000;
            background: #eee;
        }

        .title {
            font: bold 18px/40px "宋体";
            text-align: center;
            border-bottom: 1px solid #000;
        }

        #list {
            padding-left: 2px;
        }

        #list li {
            opacity: 0.8;
            font: 14px/36px "宋体";
            border-bottom: 1px solid #000;
        }

        #list li:hover {
            opacity: 1;
        }

        #list label input {
            margin: 0 20px 0 30px;
        }

        input[type="chekbox"] {
            width: 20px;
            height: 20px;
        }

        .footer {
            font: 16px/36px "宋体";
        }
    </style>
</head>

<body>

    <section id="wrap">
        <h2 class="title">百度音乐榜单</h2>
        <ul id="list">

        </ul>
        <footer class="footer">
            <label><input type="checkbox" id="checkAll" />全选/全不选</label>
            <a href="javascript:;" id="remove">删除</a>
            <input type="text" id="newInfo" />
            <a href="javascript:;" id="add">添加</a>
        </footer>
    </section>
</body>
<script>

    var data = [
        {
            id: 0,
            title: "残酷月光 - 费启鸣",
            checked: true,
            collect: true
        }, {
            id: 1,
            title: "兄弟 - 艾热",
            checked: false,
            collect: false
        }, {
            id: 2,
            title: "毕生 - 夏增祥",
            checked: false,
            collect: true
        }, {
            id: 3,
            title: "公子向北去 - 李春花",
            checked: false,
            collect: false
        }, {
            id: 4,
            title: "战场 - 沙漠五子",
            checked: true,
            collect: false //是否收藏 true 收藏 false 没有收藏
        }

    ];


    var ulEle = document.querySelector("#list");
    function renderData(rData) {
        ulEle.innerHTML = "";
        rData.forEach(function (item) {
            console.log("这个就是每一个对象的内容", item)
            var checkStr = item.checked ? ' <input type="checkbox" checked  />' : ' <input type="checkbox"  />';
            var collectStr = item.collect ? ' <a href="javascript:;" class="cancelCollect">取消收藏</a> ' : ' <a href="javascript:;" class="collect">收藏</a> ';
            var liEle = document.createElement("li");
            liEle.innerHTML = checkStr +
                '<span>' + item.title + '</span>' +
                collectStr +
                '<a href="javascript:;" class="remove">删除</a>';

            ulEle.appendChild(liEle);
        })
        addEvent();
    }


    renderData(data);


    function addEvent() {
        var lis = document.querySelectorAll("li");
        lis.forEach(function (li, key) {

            var delEle = li.querySelector(".remove");

            delEle.onclick = function () {
                //  console.log(this.parentElement)
                // this.parentElement.remove();  
                //  console.log(key);
                data.splice(key, 1);
                // console.log("删除之后的数据",data);dd
                renderData(data);
            }


            var collectEle = li.querySelector(".collect");
            var cancelEle = li.querySelector(".cancelCollect");
            // console.log(cancelEle);
            // if (collectEle) {
            //   collectEle.onclick = function () {
            //     data[key].collect = true;
            //   }
            // }

            collectEle && (collectEle.onclick = function () {
                data[key].collect = true;
                renderData(data); //根据数据来渲染视图
            })
            // if (cancelEle) {
            //   cancelEle.onclick = function () {
            //     data[key].collect = false;
            //     console.log(data);
            //   }
            // }
            cancelEle && (cancelEle.onclick = function () {
                data[key].collect = false;
                // console.log(data);
                renderData(data);
            })


            var checkBoxEle = li.querySelector("input");
            checkBoxEle.onclick = function () {
                console.log(this.checked);
                data[key].checked = !data[key].checked;
                console.log(data);
                console.log("是否全选?", isCheckAll());
                var checkAllJudge = isCheckAll();
                document.querySelector("#checkAll").checked = checkAllJudge;
            }
        })

    }
    addEvent();

    var checkAllEle = document.querySelector("#checkAll");
    checkAllEle.onclick = function () {
        // console.log(this.checked);
        var that = this;
        data.forEach(function (item) {
            // console.log(this);
            item.checked = that.checked;
        })
        // console.log(data);
        renderData(data);

    }


    function isCheckAll() {
        var res = data.every(function (item) {
            return item.checked;
        })
        console.log(res);
        return res;
    }


    var dleAllEle = document.querySelector("#remove");
    dleAllEle.onclick = function () {

        var newData = data.filter(function (item) {
            return !item.checked;
        })
        // console.log(data);
        data = newData;
        renderData(newData);
    }


    var addEle = document.querySelector("#add");
    addEle.onclick = function () {
        var title = document.querySelector("#newInfo").value;
        var obj = {
            id: (data[data.length - 1].id + 1),
            title: title,
            checked: false,
            collect: false
        };
        data.push(obj);
        renderData(data);
    }


</script>


</html>